<!--
 @description：
 @author: Xg
 @date: 2021/7/15 17:29
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible="personInfoVisible"
      width="40%"
      @close="closeDialog"
    >
      <el-row>
        <div v-for="(name, index) in personInfoData" :key="index">
          <el-col :span="2">
            <el-tag>{{ name }}</el-tag>
          </el-col>
        </div>

      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonInfo } from '@/api/meal/order'
export default {
  name: 'PersonInfoDialog',
  props: {
    personInfoVisible: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '人数详情',
      // 人数详情数据
      personInfoData: {}
    }
  },
  created() {
    this.getPersonInfo()
  },
  methods: {
    // 关闭人数详情界面
    closeDialog() {
      this.$emit('close')
    },
    getPersonInfo() {
      getPersonInfo({ taskId: this.taskId }).then(res => {
        if (res.code === 200) {
          this.personInfoData = res.data.data
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
